<template>
    <el-dialog v-model="com.dialogVisible" :width="com.dialogW" v-bind:title="com.title">
        <el-tabs :tab-position="com.tabPosition" v-model="com.activeName" stretch>
            <el-tab-pane label="登录" name="login">
                <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" :label-width="com.labelW">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="ruleForm.phone" />
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="ruleForm.code" placeholder="验证码">
                            <template #append>
                                <el-button type="primary" @click="getCode">获取验证码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="免费试用" name="register">
                <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" :label-width="com.labelW">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="ruleForm.phone" />
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input v-model="ruleForm.code" placeholder="验证码">
                            <template #append>
                                <el-button type="success" @click="getCode">获取验证码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)"> 免费试用</el-button>
                    </el-form-item>
                    <div>
                    </div>
                </el-form>
            </el-tab-pane>

        </el-tabs>
    </el-dialog>
</template>  
    
<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
const com = reactive({
    title: '',
    dialogW: "360px",
    labelW: '80px',
    tabPosition: 'top',
    activeName: ref('login'),
    dialogVisible: ref(false),
});
const openDialog = (name: any) => {
    com.activeName = name
    com.dialogVisible = true
}
const closeDialog = () => {
    com.dialogVisible = false
}
interface RuleForm {
    phone: "",
    code: ""
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    phone: "",
    code: "",
});
const rules = reactive<FormRules<RuleForm>>({
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
        },
    ]
});
const getCode = () => {
    // TODO: 发送短信验证码的逻辑，可以将手机号发送到后端接口进行处理。  
};
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
    })
}

</script>